<template>
  <!-- drawer -->
  <template v-if="component === 'drawer'">
    <el-drawer :append-to-body="true" v-bind="$attrs" class="modal-component">
      <slot />
      <template #footer>
        <slot name="footer" />
      </template>
    </el-drawer>
  </template>
  <!-- dialog -->
  <template v-else>
    <Dialog v-bind="$attrs" :append-to-body="true" style="padding-right: 0" class="modal-component">
      <!-- 滚动 -->
      <el-scrollbar max-height="60vh">
        <slot />
      </el-scrollbar>

      <template #footer>
        <slot name="footer" />
      </template>
    </Dialog>
  </template>
</template>

<script setup lang="ts">


// 定义接收的属性
interface Props {
  component?: string
}

withDefaults(defineProps<Props>(), {
  component: 'dialog'
})


</script>

<style lang="scss">
.modal-component {
  .modal-footer {
    margin-left: 10px;
    margin-right: 10px
  }

}
</style>
